<script setup lang="ts" >
// 表单
import { reactive } from 'vue'

const formInline = reactive({
    user: '',
    region: '',
    date: '',
})

// 搜索
const onSubmit = () => {
    console.log('submit!')
}

// 添加专题
const addClick = () => {
    console.log('addClick');
    
}

// 表格
const tableData = [
    {
        time: '2016-05-03',
        name: 'Tom',
        blur: '是',
        num: '1',
    },
    {
        time: '2016-05-02',
        name: 'Tom',
        blur: '是',
        num: '1',
    },
    {
        time: '2016-05-04',
        name: 'Tom',
        blur: '是',
        num: '1',
    },
    {
        time: '2016-05-01',
        name: 'Tom',
        blur: '是',
        num: '1',
    },
]

// 详细
const handleClick = () => {
    console.log('click!')
}
</script>

<template>
    <div style="width: 80vw; height: 100vh;">
        <div class="common-layout">
            <el-container>
                <el-header class="title">
                    专题管理
                </el-header>
                <el-main>
                    <div class="search">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item>
                                <el-input v-model="formInline.user" placeholder="请输入专题名称" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="formInline.region" placeholder="是否上架" clearable>
                                    <el-option label="是" value="true" />
                                    <el-option label="否" value="false" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">搜索</el-button>
                            </el-form-item>
                        </el-form>
                        <el-button type="primary" @click="addClick">添加专题</el-button>
                    </div>

                    <div class="result">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="name" label="专题名称" width="400" />
                            <el-table-column prop="time" label="创建时间" width="200" />
                            <el-table-column prop="blur" label="是否上架" width="180" />
                            <el-table-column prop="num" label="参与人数" width="180" />
                            <el-table-column fixed="right" label="操作">
                                <template #default>
                                    <el-button link type="primary" size="small" @click="handleClick">详细</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-main>
            </el-container>
        </div>


    </div>
</template>


<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}
.search{
    display: flex;
    justify-content: space-between;
}
.title{
    line-height: 55px;
    box-shadow: -5px 5px 5px #7e7d7d;
}
</style>